import { Button, Card,Modal } from 'antd';
import React from 'react';
import './ui.less';

export default class Modals extends React.Component{
    state={
        showModal1:false,
        showModal2:false,
        showModal3:false,
        showModal4:false,
        showModal5:false
    }
    handleOpen=(type)=>{
        this.setState({
            [type]:true
        })
    }
    render(){
        return(
            <div>
                <Card title="基础模态框" className="card-wrap">
                    <Button type="primary" onClick={()=> this.handleOpen('showModal1')}>open</Button>
                    <Button type="primary" onClick={()=> this.handleOpen('showModal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={()=> this.handleOpen('showModal3')}>顶部20px弹框</Button>
                    <Button type="primary" onClick={()=> this.handleOpen('showModal4')}>水平垂直居中</Button>
                    <Button type="primary" onClick={()=> this.handleOpen('showModal5')}></Button>
                </Card>
                <Modal
                    title="温馨提示"
                    visible={this.state.showModal1}
                    onCancel={()=>{
                        this.setState({
                            showModal1:false
                        })
                    }}
                >
                    <p>wow</p>
                </Modal>
                <Modal
                    title="温馨提示"
                    visible={this.state.showModal2}
                    okText="下一步"
                    cancelText="算了"
                    onCancel={()=>{
                        this.setState({
                            showModal2:false
                        })
                    }}
                >
                    <p>wow</p>
                </Modal>
            </div>
        );
    }
}